<template>
<div class="person">
<h1 > 情况三:监视reactiv定义的对象类型的数据</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改人</button>

</div>
</template>
<script setup lang="ts" name="person">
import {ref,reactive, computed,watch} from 'vue'
let person = reactive({
  name:"张三",
  age :18,
})

let obj = reactive({
  a:{
    b:{
      c:666
    }
  }
})

// 方法
const changeName=()=>{
  person.name += "~"
}
const changeAge=()=>{
  person.age += 1 
}

const changePerson =()=>{
  Object.assign(person,{name:"李四", age:90})
}


//  监视 情况三 监视reactiv定义的对象类型的数据 , 且默认开启深度监视的, 该深度监视试关闭不了
watch(person,(newValue,oldValue)=>{
  console.log("person的变化", newValue,oldValue);
  
})

</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input{
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
